/**Created by liaoyingchao on 2019-07-22.*/

<template>
  <div class="web-app-info">
    <div class="title-row">
      <div class="title">{{appInfo.name}}</div>
    </div>
    <div class="apps">
      <div class="info line-bottom" @click="openFir(appInfo.IOSPath)" v-if="appInfo.IOSPath">
        <div class="icon">
          <img :src="appInfo.IOSIconUrl">
          <div class="d-qr">
            <canvas ref="IOSQRCODE"></canvas>
          </div>
        </div>
        <div class="name">{{appInfo.IOSName}}（IOS） <span class="genxin" v-if="getHasGenxin('ios')">近期更新</span></div>
        <div class="sub-info">
          <span>版本：{{appInfo.IOSVersion}}</span>
          <span :class="timeWarning(appInfo.IOSUpdateTime)">更新于：{{getTimeStr(appInfo.IOSUpdateTime)}}</span>
        </div>
      </div>
      <div class="info line-bottom" @click="openFir(appInfo.AndroidPath)" v-if="appInfo.AndroidPath">
        <div class="icon">
          <img :src="appInfo.AndroidIconUrl">
          <div class="d-qr">
            <canvas ref="ANDROIDQRCODE"></canvas>
          </div>
        </div>
        <div class="name">{{appInfo.AndroidName}}（Android） <span class="genxin"
                                                                 v-if="getHasGenxin('android')">近期更新</span></div>
        <div class="sub-info">
          <span>版本：{{appInfo.AndroidVersion}}</span>
          <span :class="timeWarning(appInfo.AndroidUpdateTime)">更新于：{{getTimeStr(appInfo.AndroidUpdateTime)}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import QRCode from 'qrcode'
  import tools from '@/utils/tools'

  export default {
    name: "web-app-info",
    components: {},
    props: ['appInfo'],
    data() {
      return {}
    },
    methods: {
      openFir: function (url) {
        if (url) {
          window.location.href = url;
        }
      },
      timeWarning: function (time) {
        if (parseInt(time) + 60 * 24 * 3600 * 1000 < (new Date()).getTime()) {
          return 'warning-2'
        } else if (parseInt(time) + 20 * 24 * 3600 * 1000 < (new Date()).getTime()) {
          return 'warning-1'
        }
        return ''
      },
      getTimeStr: function (time) {
        return tools.getTimeStr(time);
      },
      getHasGenxin: function (type) {
        let time;
        if (type == 'ios') {
          time = this.appInfo.IOSUpdateTime
        } else {
          time = this.appInfo.AndroidUpdateTime
        }
        let localTime = (new Date()).getTime();
        if (parseInt(time) + 10 * 24 * 3600 * 1000 > localTime) {
          return true;
        }
        return false;
      },
      createQrCode: function () {
        this.$nextTick(() => {
          if (this.appInfo.IOSPath) {
            let codeDiv = this.$refs.IOSQRCODE;
            QRCode.toCanvas(codeDiv, this.appInfo.IOSPath, {width: 120})
          }
          if (this.appInfo.AndroidPath) {
            let codeDiv = this.$refs.ANDROIDQRCODE;
            QRCode.toCanvas(codeDiv, this.appInfo.AndroidPath, {width: 120})
          }
        })

        // setTimeout(() => {
        //
        // }, 1000)
      }
    },
    mounted() {
      this.createQrCode();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped type="text/stylus">
  .web-app-info {
    overflow hidden
    padding 5px 20px;

    .title-row {
      padding-top 8px;
      font-size 15px;
      font-weight 500;
    }

    .apps {
      padding-top 10px;
      display flex;
      align-items center;
      justify-content space-between;

      .info {
        margin 0 10px;
        position relative;
        flex 1;

        .app-code {
          position absolute;
          right 0px;
          top 0px;
        }

        .icon {
          display flex;
          align-items top;

          img {
            width 80px;
            height 80px;
            margin-right 12px;
          }
        }

        .name {
          font-size 13px;
          color black;
          padding 10px 0;

          .genxin {
            margin-left 20px;
            font-size 10px;
            padding 2px 10px;
            border-radius 10px;
            background-color lightgreen;
            color green;
          }
        }

        .sub-info {
          padding-bottom 8px;
          font-size 12px;
          color #666;
          display flex;
          align-items center;
          justify-content space-between;

          .warning-1 {
            color #ffc50e;
          }

          .warning-2 {
            color red;
          }
        }
      }
    }
  }
</style>